<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>父传子组件</title>
		<script src="https://unpkg.com/vue@next"></script>
	</head>
	<body>
		<!-- 豆雪琴  209010214 -->
		<div id="root">
			<h2>子组件传过来的信息:{{father}}</h2>
			<tup class="Tup" @subsay="subsayHandle"></tup>
			
		</div>
		<script>
			const app=Vue.createApp({
				data(){
					return{
						father:""
					}
				},
				methods:{
					subsayHandle(messge){ //传入参数
						this.father=messge;
					}
				}

			});
			app.component('tup',{ //创建一个组件
				methods:{
					handleClick(){
						this.$emit("subsay","爸爸吃饭了吗")//子传父必须要有$emit作为触发
					}
				},
				
				template:`
				<div>
				<button type="button" @click="handleClick()">子组件测试按钮</button>
				</div>
			`
			});
			const vm=app.mount('#root');
		</script>
	</body>
</html>